<template>
  <div ref="chart" style="width:735px;height:100% ;" class="boxall">
    <!-- <div style="width: 100%; height: 100%; background: url(../../assets/地图背景图/微信图片_20221013112700.png) no-repeat 0 0 / contain;"></div> -->
  </div>
</template>
<!-- <script src="./components/beijing/beijing.js"></script> -->
<script>
import { beijing } from '@/views/beijing/beijing'
// import * as echarts from 'echarts'
export default {
  name: 'Bei-Jing',
  mounted() {
    this.getEchartData()
  },
  data() {
    return {}
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          // series: [{
          //   type: 'map',
          //   map: '北京',
          //   label: {
          //     show: true
          //   }
          // }],
          // backgroundColor: '#007acc',
          title: {
            top: 20,
            text: beijing,
            subtext: '',
            x: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            map: '北京',
            aspectScale: 1.1, // 长宽比
            zoom: 1.3,
            roam: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#ffd600', // 地图各区文字颜色
                  fontSize: 15
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#3350df',
                // borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#607af8' // 0% 处的颜色 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#3350df' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                // areaColor: '#76b1ff',
                shadowColor: 'rgba(128, 217, 248, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              }
            }
          },
          series: [
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              showEffectOn: 'render',
              rippleEffect: {
                period: 15,
                scale: 1, // 打点大小
                brushType: 'fill'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  offset: [15, 0],
                  color: '#1DE9B6',
                  show: true
                }
              },
              // 点颜色
              itemStyle: {
                normal: {
                  color: '#04daf8',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              data: [
                {
                  // name: '供应商A',
                  value: [115.974519, 40.457009],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  // name: '供应商B',
                  value: [116.143267, 39.749144],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [116.843177, 40.376834],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [116.653525, 40.128936],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [116.83524, 40.450856],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [116.83524, 40.20856],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [116.83524, 40.20856],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [116.66246, 40.177452],
                  itemStyle: {
                    color: '#23bd68'
                  }
                },
                {
                  value: [116.570793, 40.119865],
                  itemStyle: {
                    color: '#23bd68'
                  }
                },
                {
                  value: [
                    116.599845,
                    40.218445
                  ],
                  itemStyle: {
                    color: 'pink'
                  }
                },
                {
                  value: [
                    116.569159,
                    40.114923
                  ],
                  itemStyle: {
                    color: 'pink'
                  }
                },
                {
                  value: [
                    116.557538,
                    40.153841
                  ],
                  itemStyle: {
                    color: '#f14501'
                  }
                },
                {
                  value: [
                    116.249076,
                    40.176931
                  ],
                  itemStyle: {
                    color: '#f14501'
                  }
                },
                {
                  value: [
                    116.73499,
                    40.205932
                  ],
                  itemStyle: {
                    color: '#ff35d6'
                  }
                },
                {
                  value: [
                    116.662997,
                    40.154713
                  ],
                  itemStyle: {
                    color: '#ff35d6'
                  }
                },
                {
                  value: [
                    116.837409,
                    40.15919
                  ],
                  itemStyle: {
                    color: '#ff35d6'
                  }
                },
                {
                  value: [
                    116.675222,
                    39.889713
                  ],
                  itemStyle: {
                    color: '#ff35d6'
                  }
                },
                {
                  value: [
                    116.68782,
                    39.86099
                  ]
                },
                {
                  value: [
                    116.727172,
                    39.86455
                  ],
                  itemStyle: {
                    color: '#ff35d6'
                  }
                },
                {
                  value: [
                    116.560431,
                    39.85491
                  ],
                  itemStyle: {
                    color: '#ff35d6'
                  }
                },
                {
                  value: [
                    116.684548,
                    39.899778
                  ]
                },
                {
                  value: [
                    116.780506,
                    39.804763
                  ],
                  itemStyle: {
                    color: '#ff35d6'
                  }
                },
                {
                  value: [
                    116.675161,
                    39.959485
                  ],
                  itemStyle: {
                    color: '#ff35d6'
                  }
                },
                {
                  value: [
                    116.667516,
                    39.924543
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.655608,
                    39.946923
                  ],
                  itemStyle: {
                    color: 'pink'
                  }
                },
                {
                  value: [
                    116.727123,
                    39.963688
                  ]
                },
                {
                  value: [
                    116.519222,
                    39.798074
                  ],
                  itemStyle: {
                    color: 'pink'
                  }
                },
                {
                  value: [
                    116.326437,
                    39.676122
                  ]
                },
                {
                  value: [
                    116.372146,
                    39.741537
                  ]
                },
                {
                  value: [
                    116.366703,
                    39.76052
                  ]
                },
                {
                  value: [
                    116.502111,
                    39.767171
                  ]
                },
                {
                  value: [
                    116.528229,
                    39.73925
                  ]
                },
                {
                  value: [
                    116.547678,
                    39.807678
                  ]
                }, {
                  value: [
                    116.616966,
                    39.798857
                  ]
                },
                // 房山文字位置
                {
                  value: [
                    116.66022,
                    39.78248
                  ]
                },
                {
                  value: [
                    116.525301,
                    39.981568
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.663413,
                    39.916019
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.663413,
                    39.916019
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.615144,
                    39.898228
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.5832,
                    39.878422
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.531687,
                    39.859724
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.478424,
                    39.835726
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.426827,
                    39.786344
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.364705,
                    39.761397
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.525451,
                    39.624896
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.525451,
                    39.624896
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.432338,
                    39.618037
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.408678,
                    39.59778
                  ],
                  itemStyle: {
                    color: '#e7ab0b'
                  }
                },
                {
                  value: [
                    116.320907,
                    39.585969
                  ],
                  itemStyle: {
                    color: '#25ac61'
                  }
                },
                {
                  value: [
                    116.265465,
                    39.546729
                  ],
                  itemStyle: {
                    color: '#25ac61'
                  }
                },
                {
                  value: [
                    116.265465,
                    39.546729
                  ],
                  itemStyle: {
                    color: '#25ac61'
                  }
                },
                {
                  value: [
                    116.337105,
                    39.678819
                  ],
                  itemStyle: {
                    color: '#25ac61'
                  }
                },
                {
                  value: [
                    116.337105,
                    39.678819
                  ],
                  itemStyle: {
                    color: '#25ac61'
                  }
                },
                {
                  value: [
                    116.344693,
                    39.713097
                  ],
                  itemStyle: {
                    color: '#25ac61'
                  }
                },
                {
                  value: [
                    116.345698,
                    39.744556
                  ],
                  itemStyle: {
                    color: '#25ac61'
                  }
                },
                {
                  value: [
                    116.364755,
                    39.775716
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.36676,
                    39.797518
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.380399,
                    39.820182
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.380399,
                    39.820182
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.500997,
                    39.873927
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.500997,
                    39.873927
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.519294,
                    39.879732
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.565997,
                    39.87136
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.44689,
                    39.974563
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.54689,
                    39.974563
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.55689,
                    39.974563
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.55889,
                    39.974563
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.65889,
                    39.974563
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.65989,
                    39.974563
                  ],
                  itemStyle: {
                    color: '#fb512c'
                  }
                },
                {
                  value: [
                    116.65989,
                    39.874563
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.65989,
                    39.884563
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.65989,
                    39.894563
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.65589,
                    39.894563
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.65519,
                    39.894563
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.437457,
                    39.980234
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.42984,
                    39.92563
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.42984,
                    39.92563
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.418038,
                    39.91979
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.403414,
                    39.924091
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.30368,
                    39.88861
                  ],
                  itemStyle: {
                    color: '#ffd600'
                  }
                },
                {
                  value: [
                    116.300425,
                    39.88287
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.288332,
                    39.878279
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.619605,
                    40.161062
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.655372,
                    40.177567
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.668821,
                    40.173874
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.199722,
                    39.745051
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.417236,
                    39.858513
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.43473,
                    39.862235
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.43473,
                    39.862235
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.726694,
                    40.090915
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.760333,
                    40.093489
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.826026, 39.851864
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.503487, 39.957643
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.635766,
                    39.858798
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.512208,
                    39.977059
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.512208,
                    39.977059
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.512975,
                    40.006185
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.512975,
                    40.006185
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.51066,
                    40.029956
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.530982,
                    40.085957
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.530982,
                    40.085957
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.530982,
                    40.085956
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.468031,
                    39.984547
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.475548,
                    39.947633
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.537398,
                    40.061403
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.564327,
                    40.075243
                  ],
                  itemStyle: {
                    color: '#cb505f'
                  }
                },
                {
                  value: [
                    116.564327,
                    40.075243
                  ],
                  itemStyle: {
                    color: '#007acc'
                  }
                },
                {
                  value: [
                    116.559672,
                    40.109807
                  ],
                  itemStyle: {
                    color: '#007acc'
                  }
                },
                {
                  value: [
                    116.559672,
                    40.109807
                  ],
                  itemStyle: {
                    color: '#007acc'
                  }
                },
                {
                  value: [
                    116.568635,
                    40.124417
                  ],
                  itemStyle: {
                    color: '#007acc'
                  }
                },
                {
                  value: [
                    116.614789,
                    40.13676
                  ],
                  itemStyle: {
                    color: '#007acc'
                  }
                },
                {
                  value: [
                    116.669888,
                    40.140911
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    112.431888,
                    39.338678
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    112.431888,
                    39.338678
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.755211,
                    40.14134
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.497801,
                    40.185724
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.497801,
                    40.185724
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.319351,
                    39.711728
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.319351,
                    39.711728
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.284226,
                    39.706032
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.33486,
                    39.676423
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.351388,
                    39.685989
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.362002,
                    39.642117
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.339763,
                    39.633922
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.456005,
                    39.684838
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.484645,
                    39.686239
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.456005,
                    39.684838
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.456005,
                    39.684838
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.489263,
                    39.682753
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.45876,
                    39.679416
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.450056,
                    39.663168
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                },
                {
                  value: [
                    116.435553,
                    39.63857
                  ],
                  itemStyle: {
                    color: '#5bfce8'
                  }
                }

              ]
            } // 地图线的动画效果
            // {
            //   type: 'lines',
            //   zlevel: 2,
            //   effect: {
            //     show: true,
            //     period: 4, // 箭头指向速度，值越小速度越快
            //     trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
            //     symbol: 'arrow', // 箭头图标
            //     symbolSize: 5 // 图标大小
            //   },
            //   lineStyle: {
            //     normal: {
            //       color: '#1DE9B6',
            //       width: 0.5, // 线条宽度
            //       opacity: 0.5, // 尾迹线条透明度
            //       curveness: 0.3 // 尾迹线条曲直度
            //     }
            //   },
            //   data: [
            //     {
            //       coords: [
            //         [115.974519, 40.457009],
            //         [116.143267, 39.749144]
            //       ]
            //     }
            //     // {
            //     //   coords: [
            //     //     [116.143267, 39.749144],
            //     //     [115.974519, 40.457009]
            //     //   ]
            //     // }
            //     // {
            //     //   coords: [
            //     //     [115.974519, 40.457009],
            //     //     [116.843177, 40.376834]
            //     //   ]
            //     // }
            //   ]
            // }
          ]
        }
        myChart.setOption(option)
      }
    }
  }
}
</script>

<style lang="less" scoped>
// .ditu{

//   // background-image: url(../../assets/地图背景图/微信图片_20221013112700.png);
//   // // background-position: center;
//   // background-size: cover;
// }
</style>
